<template>
	<view>
		<view class="image_upload">
			<view class="url_img_box" :class="{'url_img_box_one':count == 1}" :style="[objInfo.urlStyle]" v-for="(item,index) in imgList" :key="index">
				<view class="close_box" @click="deleteImg(index)" >
					<!-- <image :style="[objInfo.closeImg]" class="close_img" src="@/static/applyMerchants/close_img.png" ></image> -->
					<image class="close_img" src="https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/5ce29aaf63e7412c894270a5a7c5750e.png" mode="widthFix"></image>
				</view>
				<image class="url_img" :src="item+imageSuffix" mode="" @click="watchImg(item,index)" ></image>
			</view>
			<view class="image_box" @click="uploadImg" v-if="imgList.length<count" :style="[objInfo.urlStyle]">
				<image class="camera_img"  :src="customStyle?objInfo.cameraImg:'https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/b0457df751aa4bb99ab98b230e75e616.png'" ></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "imageUpload",
		props: {
			count: {
				type: Number,
				default: 9
			},
			// 判断是否用老图片上传 没有带完整链接
			imgUrlStatus: {
				type: Boolean,
				default: false
			},
			// 没有图片时底部开关
			customStyle:{
				type: Boolean,
				default: false
			},
			objInfo:{
				type:Object,
				default: function(){
					return {
						urlStyle:{},
						closeImg:{},
						cameraImg:''
					}
				}
			},
			list:{
				type: Array,
				default: []
			},
		},
		data() {
			return {
				imgList: [],
				limit:9,
				imgUrl:'',
				imageSuffix:'?imageMogr2/auto-orient'
			};
		},
		watch:{
			list:{
				handler(val){
				  this.imgList = val
				  this.imgList = this.imgList.map(res=>{
				  	   //图片路径不包含http
				  		if (this.isHttp(res)) { 
				  			res = this.imgUrl + res 
				  		} 
				  	return res
				  })
				}
			}
		},
		created() {
			this.imgList = this.list
			this.imgUrl = this.$imageUrl
			this.imgList = this.imgList.map(res=>{
				   //图片路径不包含http
					if (this.isHttp(res)) { 
						res = this.imgUrl + res 
					} 
				return res
			})
		},
		methods: {
			// 判断是否有http
			isHttp(res){
				var url = res.indexOf('http') //处理店铺头像
				 var isHttpStatus = false
					if (url == -1) { //图片路径不包含http
						isHttpStatus = true
					} 
				return isHttpStatus
			},
			watchImg(item,index) {

				// 预览图片
				uni.previewImage({
					urls: this.imgList,
					current: index,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片',],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			deleteImg(index){ //删除图片
				this.imgList.splice(index,1)
				this.$emit('success',this.imgList);
			},
			uploadImg() { //图片上传
				var _this = this
				var basurl = _this.baseUrl + '/common/v1/upload' 
				if(this.imgUrlStatus){
					basurl = _this.baseUrl + '/common/v1/watermarkUploadFile'
				}
				console.log(this.imgUrlStatus)
				let token = uni.getStorageSync('token')
				this.limit = this.count
				this.limit = this.limit - this.imgList.length
				console.log(this.limit)
				uni.chooseImage({
					count: this.limit, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: function(res) {
						console.log(res.tempFilePaths);
						console.log(JSON.stringify(res.tempFilePaths));
						uni.showLoading({
							mask:true
						})
						for (var i = 0; i < res.tempFilePaths.length; i++) {
							uni.uploadFile({
								// url: 'http://192.168.0.186:9500/digital/agriculture/admin/upload/uploadToCos', //上传的服务器地址
								url: basurl, //上传的服务器地址
								filePath: res.tempFilePaths[i],
								method: 'POST',
								name: "file",
								header: {
									'X-Access-Token': token
								},
								success: (uploadFileRes) => {
									uni.hideLoading()
									console.log('图片+++', JSON.parse(uploadFileRes.data));
									let imgdata = JSON.parse(uploadFileRes.data)
									if (imgdata.code != 200) {
										uni.showToast({
											icon: 'none',
											title: imgdata.message
										})
									} else {
										let imgurl = imgdata.data
										_this.imgList.push(imgurl)
										_this.$emit('success',_this.imgList);
									}
									uni.hideLoading()
								},
								fail: (res) => {
									console.log(res)
									uni.showToast({
										icon: 'none',
										title: '上传失败'
									})
									uni.hideLoading()
								}
							});
						}
					}
				});
				setTimeout(() => {
					uni.hideLoading()
				}, 5000)
			},
		},
	}
</script>

<style>
	.image_upload {
		display: flex;
		flex-wrap: wrap;
	}

	.image_box {
		width: 144rpx;
		height: 144rpx;
		background: #F2F2F2;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
        z-index: 10;
	}
	.url_img_box{
		width: 144rpx;
		height: 144rpx;
		border-radius: 8rpx;
		margin-right: 26rpx;
		margin-bottom: 28rpx;
		position: relative;
	}
	.url_img_box_one{
		margin-right: 0rpx;
		margin-bottom: 0rpx;
	}
	.close_box{
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		right: -10rpx;
		top: -4rpx;
		display: flex;
		justify-content: flex-end;
		z-index: 3;
	}
	.close_img{
		width: 34rpx;
		height: 34rpx;
	}

	.url_img {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	.camera_img {
		width: 100%;
		height: 100%;
		background: #EFF0F0;
		border-radius: 8rpx;
	}
</style>
